<template>
  <Modal :isOpen="isOpen" @close="emit('close')">
    <div
      class="h-[16rem] w-[18rem] lg:min-w-[30rem] p-5 space-y-2"
      v-if="userData"
    >
      <div class="flex items-center gap-4">
        <div class="avatar">
          <div class="mask mask-squircle w-16 h-16">
            <img :src="userData.photo" />
          </div>
        </div>
        <div class="flex flex-col gap-1">
          <p class="font-medium">{{ userData.name }}</p>
          <!-- <p>1234567890</p> -->
        </div>
      </div>
      <div class="space-y-2 pt-5">
        <div
          class="space-x-4 flex justify-start items-center text-gray-400 text-sm"
        >
          <AtSymbolIcon class="w-4 h-4 text-gray-400" />
          <span>未绑定邮箱</span>
        </div>
        <div
          class="space-x-4 flex justify-start items-center text-gray-400 text-sm"
        >
          <DevicePhoneMobileIcon class="w-4 h-4 text-gray-400" />
          <span>{{ userData.mobile }}</span>
        </div>
      </div>
      <div class="mt-5 w-full">
        <button
          class="btn btn-active btn-primary w-full font-medium mt-10"
          @click="handleLogout()"
        >
          退出登录
        </button>
      </div>
    </div>
  </Modal>
</template>
<script setup>
import {
  XMarkIcon,
  AtSymbolIcon,
  DevicePhoneMobileIcon,
} from "@heroicons/vue/24/solid";
import { userSet } from "~/composables/common/user";
const { clearUserData, getUserData } = userSet();
const userData = ref([]);

const emit = defineEmits(["close"]);
const handleLogout = () => {
  emit("close");
  clearUserData();
  window.location.href = "/";
};
defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
});
onMounted(() => {
  userData.value = getUserData();
});
</script>
